<template>
    <h5 class="title">子组件受到深度选择器的影响</h5>
    <p id="myP">myWatch2</p>
    <div>
千米：<input type="number" v-model="obj.kilometers">
米：<input type="number" v-model="obj.meters">
    </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'

const obj = reactive({
    kilometers:0,
    meters:0
});
watch(() => {
    return obj.kilometers
},(newval) => {
    obj.meters=newval*1000
});
watch(() => {
    return obj.meters
},(newval) => {
    obj.kilometers=newval/1000
})
</script>

<style  scoped>

</style>